<template>
    <div>

        <el-container>
            <el-header>  <a><a style="font-size: 30px" id="tb"><img src="../../assets/格调同城没字.png" style="height: 40px;width: 50px;padding-top: 0px"></a>格调同城第<a style="font-size: 25px;font-family: 华文彩云">{{StoreId}}</a>分店</a> <a>您好:<a style="color: aquamarine">{{UserName}}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a>祝您工作愉快!</a></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <el-button type="info" round @click="cancel()">退出登录</el-button><i class="el-icon-time" id="sj" style="height: 50px;width: 250px"> {{date}}</i></el-header>
            <el-container>
                <el-aside width="20vw">
                    <el-row class="tac" >
                        <el-col :span="24">
                            <el-menu
                                    default-active="2"
                                    class="el-menu-vertical-demo"
                                    @open="handleOpen"
                                    @close="handleClose">
                               <el-menu-item index="1">
                                   <i class="el-icon-loading"></i>
                                    <span slot="title" @click="$router.push({path:'/tc_shopmall_tj'})">销售&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </el-menu-item>
                                <el-menu-item index="2">
                                    <i class="el-icon-search"></i>
                                    <span slot="title" @click="$router.push({path:'/tc_shopmall_cx'})">销售信息查询</span>
                                </el-menu-item>

                                <el-menu-item index="3">
                                    <i class="el-icon-edit-outline"></i>
                                    <span slot="title"  @click="$router.push({path:'/tc_shopmall_kc'})">确定支付&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </el-menu-item>
                                <el-menu-item index="4">
                                    <i class="el-icon-view"></i>
                                    <span slot="title"  @click="$router.push({path:'/tc_shopmall_spbh'})">商品编号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>

                </el-aside>
                <el-container>
                    <el-main>
                        <transition name="move" mode="out-in">
                        <keep-alive >
                            <div style="background-color:#C0C4CC;margin-top: -58px;height: 600px;margin-left:-20px;margin-right:-20px"><h1 style="font-size: 30px;padding-top: 20px">欢迎进入格调同城结算系统🐱</h1>
                                <a>1.平等待人，优质服务，文明接待好每一位顾客</a><br/>
                                 <a>2.遵守各项准则，服从领导安排，有异议做到先服从后发表</a><br/>
                                 <a>3.规范熟悉业务技能，包括收银机操作，各单据填写假钞辨别</a><br/>
                                 <a>4.保管好收银台的办公设备，用品，严禁流失，责任到人</a><br/>
                                 <h2>格调同城祝您工作愉快!!!</h2><br/>
                            </div>
                            <router-view></router-view>
                        </keep-alive>

                    </transition></el-main>
                    <el-footer style="font-family: 方正舒体">welcome to GeDiaoTC🏪!!!</el-footer>
                </el-container>
            </el-container>
        </el-container>


    </div>
</template>

<script>
    export default {

        name: "main",
        props: {
            name: String
        },

        data(){
            return{
                date: new Date(),
                UserName:"",
                UserId:"",
                UserSelect:{id:''},
                StoreId:""
            }
        },
        mounted() {
            let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
            this.timer = setInterval(() => {
                _this.date = new Date(); // 修改数据date
            }, 1000)
        }, beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
            }
        },


        beforeRouteEnter(to, from, next) {

            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当钩子执行前，组件实例还没被创建

           // alert("home被显示");
            next(vm => {
                //在此处vm表示vue组件对象
                vm.getSession();

            });
        },
        methods: {
            getSession:function(){
                var vm=this;
                this.axios.post("Http://localhost:8686/getname").then(function (response) {
                    vm.UserSelect.id=response.data.id;
                    vm.UserName=response.data.name;
                    vm.StoreId=response.data.storeid;

                })
            },
            cancel:function(){
                this.$router.push({path:'/tc_shopmall_login'});
                var vm=this;
                this.axios.get("/deleteSession").then(function (response) {
                    vm.UserSelect.id=response.data.id;
                    vm.UserName=response.data.realname;
                })
            },
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #333333;
        color: white;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: white;
        color: #333;
        text-align: center;
        line-height: 200px;
    }
#tb{
   margin-left: -400px;
}
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 50px;
        height: 550px;
    }
</style>